
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Input, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import request from '@/utils/request';
import * as storage from '@/utils/storage';
import style from './index.less';
import { useAiTextEditor } from './AiTextEditor';
import { TextAutoPlay } from './TextAutoPlay';


const AIText: React.FC<{}> = () => {
    // const wToken = '24.f82b271fe5ae1ae799f7cc86dbce4bf9.86400000.1689167035760.ca6cb6cc54d3461c9a011ff6227ca4b2-175217';
    // const [token, setToken] = useState(storage.getSessionStorage('wToken'));
    const [text, setText] = useState('');

    const { sendMessage, text: dt, loading } = useAiTextEditor()
    const handleGen = useCallback(() => {
        sendMessage(text)
    }, [text])

    return (
        <PageHeaderWrapper>
            <div className={style['ai_text_content']}>
                <div className={style['ai_text_title']}>AI文案生成器</div>
                <div className={style['ai_text_tips']}>输入你想发布的内容，智能帮你生成专业的宣传文案。</div>
                <Input.TextArea className={style['ai_text_textarea']} value={text} onChange={(v) => setText(v.target.value)} />
                <Button className={style['ai_text_btn']} type='primary' onClick={handleGen} loading={loading}>提交</Button>
                <div className={style['ai_content']}>
                    { dt && <TextAutoPlay
                        text={dt}
                    />}
                </div>
            </div>
        </PageHeaderWrapper>
    );
};

export default AIText;
